<!--
 * @Author: hu_binbin
 * @Date: 2021-08-05 14:05:03
 * @LastEditTime: 2021-08-13 15:53:54
 * @Description: 关注信息
-->

<template>
	<article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
			<Theader :title="title" :headerStyle="{color:'#fff'}" :textStyle="{color:'#fff'}" :titleStyle="{color:'#fff'}">
				<template slot="header_arrow">
					<van-icon size="25" name="arrow-left" @click="back" />
				</template>
				<template slot="header_icon">
					<van-image class="imgSize" width="34" height="47" @click="rfidBtn" :src="icon.rfid" />
                    <van-image class="imgSize" width="44" height="44" @click="scanBtn" :src="icon.scan" />
				</template>
			</Theader>
        </div>
        <div style="overflow-y: auto;height: calc(100% - 60px);">
            <div class="bg-cen"></div>
            <!-- 菜单-->
            <div class="work">
                <van-cell @click="showScreenPage" class="work-cell">
                    <template slot="title">
                        <span class="line_green"></span>
                        <label class="title-label">正在开展工作</label>
                    </template>
                    <template slot="default">
                        <van-popover
                        v-model="showPopover"
                        trigger="click"
                        :actions="actions"
                        placement="bottom-end"
                        >
                            <template slot="reference">
                                <span style="color:#10B296;">本年</span>
                                <van-icon name="arrow-down" color="#10B296"/>
                            </template>
                        </van-popover>
                    </template>
                </van-cell>
                <div class="operClass">
                    <div class="operTicket">
                        <van-image :src="icon.operTicket" width="26" height="26"></van-image>
                        <span>操作票</span>
                        <span class="border"></span>
                        <label><font class="color-blue">16</font>个</label>
                    </div>
                    <div class="workTicket">
                        <van-image :src="icon.workTicket" width="26" height="26"></van-image>
                        <span>工作票</span>
                        <span class="border"></span>
                        <label><font class="color-green">16</font>个</label>
                    </div>
                </div>
                <!-- 柱状图 -->
                <barEchars :datasource="barEcharData"></barEchars>

                <div class="table-data">
                    <div class="table-item">
                        <div class="lan">20</div>
                        <div class="table-name">巡视计划数</div>
                    </div>
                    <div class="line"></div>
                    <div class="table-item">
                        <div class="hong">15</div>
                        <div class="table-name">巡视到期数</div>
                    </div>
                    <div class="line"></div>
                    <div class="table-item">
                        <div class="lu">20</div>
                        <div class="table-name">巡视完成数</div>
                    </div>
                </div>
            </div>
            <!--运行值班统计-->
            <div class="content">
                <van-cell :border="false">
                    <template slot="title">
                        <span class="line_green"></span>
                        <label class="title-label">运行值班统计</label>
                    </template>
                </van-cell>
                <div class="plan">
                    <div class="record">
                        <div class="name">运维计划</div>
                        <div class="cont">
                            <span>总数：<font class="color-green">34</font></span>
                            <label>未完成：<font class="color-orange">21</font></label>
                        </div>
                    </div>
                    <div class="record">
                        <div class="name">运行记录</div>
                        <div class="cont">
                            <span>总数：<font class="color-green">34</font></span>
                            <label>未完成：<font class="color-orange">21</font></label>
                        </div>
                    </div>
                </div>
                <van-cell>
                    <template slot="default">
                        <span style="color:#1CB69D;">查询明细</span>
                        <van-icon color="#1CB69D" name="arrow" />
                    </template>
                </van-cell>
            </div>
            <!--运行概况-->
            <div>
                <van-cell>
                    <template slot="title">
                        <span class="line_green"></span>
                        <label class="title-label">运行概况</label>
                    </template>
                    <template slot="default">
                        <van-popover class="popover" :offset="[0,8]"
                        v-model="showDateScreen"
                        trigger="click"
                        :actions="actions"
                        placement="bottom-end"
                        >
                            <template slot="reference">
                                <span style="color:#10B296;">本年</span>
                                <van-icon name="arrow-down" color="#10B296"/>
                            </template>
                        </van-popover>
                    </template>
                </van-cell>
                <div style="height: 100%;overflow: auto;">
                    <!--缺陷-->
                    <circleEcharsDefect :datasource="circleEcharDefectData"></circleEcharsDefect>
                    <!--隐患-->
                    <circleEcharsHidden  :data="circleEcharHiddenData"></circleEcharsHidden>
                    <!--故障-->
                    <circleEcharsBreakdown  :data="circleEcharBreakData"></circleEcharsBreakdown>
                </div>
            </div>
            <Tabbar></Tabbar>
        </div>
        
	</article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Tabbar from '@/components/tabbar'
    import circleEcharsDefect from "../component/circleEcharsDefect"
    import circleEcharsHidden from "../component/circleEcharsHidden"
    import circleEcharsBreakdown from "../component/circleEcharsBreakdown"
    import barEchars from "../component/barEchars"
	export default {
		name: 'tourIndex',
		components: {
            Theader,
            circleEcharsDefect,
            circleEcharsHidden,
            circleEcharsBreakdown,
            barEchars,
            Tabbar
		},
		data() {
			return {
				active: 0,
				title: "关注消息",
				icon: {
					rfid:require('../../../../assets/tour/rifid.png'),
                    scan:require('../../../../assets/tour/scan.png'),
                    operTicket:require('../../../../assets/tour/concern-blue.png'),
                    workTicket:require('../../../../assets/tour/concern-green.png'),
                    
                },
                showPopover: false,
                showDateScreen: false,
				actions: [
					{ text: '本日'},
					{ text: '本周'},
                    { text: '本月'},
                    { text: '本季'},
				],
                workName: "",
                workDate: 0,//工作日期
                statiDate: 0,//统计日期
                general:0,//运行概况
                circleEcharDefectData: [
                    {value: 13, name: '一般缺陷'},
                    {value: 7, name: '严重缺陷'},
                    {value: 9, name: '危急缺陷'},
                ],
                circleEcharHiddenData: [
                    {value: 13, name: '一般隐患'},
                    {value: 7, name: '严重隐患'},
                    {value: 9, name: '危急隐患'},
                ],
                circleEcharBreakData: [
                    {value: 13, name: '站内故障'},
                    {value: 7, name: '故障'},
                    {value: 9, name: '隐患'},
                ],
                barEcharData: [11, 6, 13, 14, 22]
			}
		},
		
		computed: {
			
		},
		
		methods: {
            /**
            * @description: rifid
            * @param {*}
            * @return {*}
            */         
			rfidBtn() {

            },
            /**
             * @description: 扫一扫
             * @param {*}
             * @return {*}
             */
            scanBtn() {

			},
			showScreenPage() {

            },
            /**
             * @description: 返回
             * @param {*}
             * @return {*}
             */
            back() {
                
            }
		},
		
		watch: {
			
		},
		mounted() {
			
		},
		created() {

		},
		
	}
</script>

<style scoped>
	article {
        height: 100vh;
	}
	.bg_4dbfae{
		background: #F4F5F6 !important;
	}
	.title-bg{
		height: 45px;
		width: 100%;
        background: #10B296;
	}
    .bg-cen{
        height: 85px;
		width: 100%;
        background: #10B296; 
    }
	.work{
		position: relative;
		top: -5rem;
		margin-left: 15px;
		margin-right: 15px;
		background: #fff;
    	border-radius: 10px;
    }
    .van-cell{
        line-height: 16px;
    }
    .work-cell{
        border-radius: 10px;
    }
    .operClass{
        display: flex;
        margin: 0.6rem;
        align-items: center;
        justify-content: space-around;
    }
    .operClass .operTicket, .operClass .workTicket{
        font-size: 13px;
        width: 40%;
        display: flex;
        padding: 0.6rem;
        align-items: center;
        border-radius: 4px;
        background: #F5F6F7;  
        justify-content: space-around;  
    }
    .operClass label{
        color: #333;
    }
    .operClass span{
        color: #333;
    }
    .color-blue{
        color:#1481EE; 
    }
    .color-green{
        color:#19C169; 
    }
    .color-orange{
        color:#FFAA00; 
    }
    .border{
        height: 13px;
        border-right: 1px solid #ccc;
    }
    .content{
        margin-top: -22%;
        background: #fff;
        margin-bottom: 0.6rem;
    }
    .plan{
        margin: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .record{
        width: 40%;
        padding: 0.6rem;
        background: #F5F6F7;
        text-align: center;
    }
    .record .name{
        font-size: 13px;
        color: #333;
    }
    .record .cont{
        margin-top: 0.5rem;
        font-size: 11px;
        color: #999;
    }
    .table-data{
        display: flex;
        margin: 0.6rem;
        align-items: center;
        justify-content: space-around;
        padding-bottom: 1rem;
    }
    .table-item{
        text-align: center;
        font-size: 13px;
        width: 30%;
    }
    .table-name{
        margin: 0.5rem 0;
        color:#999;
    }
    .lan{
        font-size: 1rem;
        color:#4B8BF4;
    }
    .hong{
        font-size: 1rem;
        color:#EE3E44; 
    }
    .lu{
        font-size: 1rem;
       color:#00AB90; 
    }
    .line{
       height: 2rem;
       border-right: 1px solid #ccc;
    }
    .van-cell__value{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
</style>
